<!--
 * createor: zc
 * email: zc8023zs@163.com
 * create_time: 2020/3/14 13:46:24
 *-->
<template>
<el-container>
	<el-main>
		<el-form ref="dataForm" :model="formData" label-width="200px" style="padding:5% 5% 0 5%">
          <el-form-item>
            <el-button type="primary" icon="el-icon-edit" @click="onSave" :loading="saveLoading">{{$t('table.save')}}</el-button>
          </el-form-item> 
          <input type="hidden" v-model="formData.id"/>
        <el-form-item label="栏目id：">
          <treeselect
            :options="class_idCascaderData"
            :default-expand-level="3" :flatten-search-results="true"
            v-model="formData.class_id"
            placeholder=""
            :normalizer="class_idNormalizer"
          />
        </el-form-item>
        <el-form-item label="标题：">
          <el-input v-model="formData.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="副标题：">
          <el-input v-model="formData.short_title" placeholder="请输入副标题"></el-input>
        </el-form-item>
        <el-form-item label="正文：">
            <Tinymce ref="editor_content" v-model="formData.content" :height="100" />
        </el-form-item>
        <el-form-item label="正文1：">
            <Tinymce ref="editor_content1" v-model="formData.content1" :height="100" />
        </el-form-item>
        <el-form-item label="正文2：">
            <Tinymce ref="editor_content2" v-model="formData.content2" :height="100" />
        </el-form-item>
        <el-form-item label="内容模型：">
            <el-select v-model="formData.model_type" placeholder="请选择">
                <el-option
                  v-for="item in model_typeSelectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="状态：">
            <el-select v-model="formData.status" placeholder="请选择">
                <el-option
                  v-for="item in statusSelectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input-number v-model="formData.sort" :min="0" :max="99999999999" :precision="0"></el-input-number>
        </el-form-item>
        <el-form-item label="置顶方式：">
          <el-radio-group v-model="formData.top_type">
            <el-radio :label="1">首页</el-radio>
          </el-radio-group>
          <el-radio-group v-model="formData.top_type">
            <el-radio :label="2">栏目焦点</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="保密级别：">
            <el-select v-model="formData.secret_level" placeholder="请选择">
                <el-option
                  v-for="item in secret_levelSelectData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
        </el-form-item>
		</el-form>
	</el-main>
</el-container>
</template>
<style scoped>
body .app-container .el-container,
body .app-container .el-header,
body .app-container .el-main,
body .el-container,
body .el-header,
body .el-main {
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
<script>
import Tinymce from "@/components/Tinymce";
import {
  articleSelecttree,
  articleSelectpage,
  articleSelect,
  articleAdd,
  articleUpdate,
  articleDel,
  articleInfo
} from '@/api/project/article/project_article_article'
import {
  article_classSelect,article_classSelecttree,article_classSelectpage
} from '@/api/project/article/project_article_article_class'
import treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "a_articlea_article_edit",
  components: { Tinymce,treeselect, },
  data() {
    return {
      curdAction: "",
      saveLoading: false,
      formData: {
        id: null, 
        class_id: null,
 
        title: null, 
        short_title: null, 
        content: null, 
        content1: null, 
        content2: null, 
        model_type: null, 
        status: null, 
        sort: null, 
        top_type: null, 
        secret_level: null, 
    },
      class_idCascaderData: [
      ],
      model_typeSelectData: [
        {value: 1,label: '新闻'},
        {value: 2,label: '视频'},
        {value: 3,label: '文库'},
        {value: 4,label: '图片'},
        {value: 5,label: '下载'},
        {value: 6,label: '文章'},
      ],
      statusSelectData: [
        {value: 1,label: '初稿'},
        {value: 2,label: '发布'},
        {value: 3,label: '已审核'},
        {value: 4,label: '流转中'},
        {value: 5,label: '驳回'},
        {value: 6,label: '草稿'},
        {value: 7,label: '下线'},
      ],
      secret_levelSelectData: [
        {value: 1,label: '公开'},
      ],
    }
  },
  created(){
    var result = location.search.match(new RegExp("[\?\&]id=([^\&]+)", "i"));
    this.formData.id=result[1];
    this.class_idCascaderDataList();
        this.onInfo(this.formData);
  },
  methods:{
    class_idCascaderDataList(queryString,cb){
        article_classSelecttree().then(r=>{
            this.class_idCascaderData = r.dataArray.dataList;
        })
    },
      class_idNormalizer(node){
        if (node.children == undefined || node.children == null || node.children.length==0) {
          delete node.children;
        }
        return {
          id: node.id,
          label: node.class_name,
          children: node.children
        };
      }, 
    onSearch(){
      this.listQuery.page=1;
      this.getList();
    },
    onInfoPage(scope){
      var view = this.$store.state.permission.routesMap["/article/article_info"];
      this.$router.push({ path: view.path, query: {m_id:view.code_aes,id:scope.row.id} })
    }, 
    reset(){
      this.formData = {
        id: null, 
        class_id: null,
        title: null, 
        short_title: null, 
        content: null, 
        content1: null, 
        content2: null, 
        model_type: null, 
        status: null, 
        sort: null, 
        top_type: null, 
        secret_level: null, 
      };
        this.class_idCascaderDataList();
 
    },
    onSave(){
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.saveLoading = true;
          if (this.curdAction == "add") {
            articleAdd(this.$qs.stringify(this.formData)).then(r => {
                this.formData.id=r.dataSingle;
                this.curdAction = 'update';
                this.saveLoading  = false;
                this.$notify({
                  title: "添加成功",
                  type: "success",
                  duration: 2000
                });
                var that = this;
                setTimeout(function(){ 
                  that.closeSelectedTag();
                },2000);
            }).catch(()=>{
              this.saveLoading=false;
            });
          } else if (this.curdAction == "update") {
            articleUpdate(this.$qs.stringify(this.formData)).then(r => {
                this.saveLoading  = false;
                this.$notify({
                  title: "修改成功",
                  type: "success",
                  duration: 2000
                });
                var that = this;
                setTimeout(function(){ 
                  that.closeSelectedTag();
                },2000);
            }).catch(()=>{
              this.saveLoading=false;
            });
          }
        }
      });
    },
    onInfo(data){
        articleInfo({id:data.id}).then(r=>{
          if(r.dataSingle==null){
            this.curdAction = "add";
            return false;
          }
            this.formData.id=r.dataSingle.id;
            if(r.dataSingle.class_id==0){this.formData.class_id=null;}else{this.formData.class_id=r.dataSingle.class_id;}
            this.formData.title=r.dataSingle.title;
            this.formData.short_title=r.dataSingle.short_title;
            this.formData.content=r.dataSingle.content;
            this.formData.content1=r.dataSingle.content1;
            this.formData.content2=r.dataSingle.content2;
            this.formData.model_type=r.dataSingle.model_type;
            this.formData.status=r.dataSingle.status;
            this.formData.sort=r.dataSingle.sort;
            this.formData.top_type=r.dataSingle.top_type;
            this.formData.secret_level=r.dataSingle.secret_level;
            this.curdAction = "update";
        });
    },
    closeSelectedTag() {
      var view = this.$store.state.permission.routesMap["/article/article_edit"];
      this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => {
        if (this.isActive(view)) {
          this.toLastView(visitedViews, view)
        }
      })
    },
    toLastView(visitedViews, view) {
      const latestView = visitedViews.slice(-1)[0]
      if (latestView) {
        this.$router.push(latestView.fullPath)
      } else {
        if (view.name === 'Dashboard') {
          this.$router.replace({ path: '/redirect' + view.fullPath })
        } else {
          this.$router.push('/')
        }
      }
    },
    isActive(route) {
      return route.path === this.$route.path
    },
  }
}
</script>